@import '../style/variables';
@import '../style/transitions';

.customizer-handle {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9;

  [dir='rtl'] & {
    left: 30px;
    right: auto;
  }
}

.customizer-panel {
  position: fixed;
  top: 0;
  right: -320px;
  bottom: 0;
  z-index: 11;
  width: 320px;
  padding: 0 16px;
  box-sizing: border-box;
  transform: translateX(0);
  transition: swift-ease-out(transform);
  overflow: auto;

  &.opened {
    transform: translateX(-100%);
  }

  [dir='rtl'] & {
    left: -320px;
    right: auto;

    &.opened {
      transform: translateX(100%);
    }
  }
}

.customizer-panel-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  transition-duration: $swift-ease-out-duration;
  transition-timing-function: $swift-ease-out-timing-function;
  transition-property: background-color, visibility;
  visibility: hidden;

  &.opened {
    visibility: visible;
  }
}
